<template>
  <!-- 排名变化页面 -->
  <div class="box">
    <div class="rankingChange_top">
      <van-row>
        <van-col
          span="8"
          :style="{fontSize:'16px',color:'rgba(0, 114, 255, 0.88)'}"
          @click="time=true"
        >{{data_time}}
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="8"
          @click="show = true"
          :style="{fontSize:'16px',color:'rgba(0, 114, 255, 0.88)'}"
        >全部
          <van-icon name="arrow-down" />
        </van-col>
        <van-col
          span="8"
          :style="{fontSize:'16px',color:'rgba(0, 114, 255, 0.88)'}"
          @click="technology=true"
        >{{dept}}
          <van-icon name="arrow-down" />
        </van-col>
        <!-- 时间插件 -->
        <van-popup
          v-model="time"
          :safe-area-inset-bottom="true"
          :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="year"
            :min-date='minDate'
            :max-date='maxDate'
            @confirm="getTime_month"
            @cancel="time=false"
          />

        </van-popup>
        <van-popup
          v-model="show"
          :safe-area-inset-bottom="true"
          :style="{ height:'85%', width:'54%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                title="全部"
                clickable
                @click="show_event(0)"
              >
                <van-radio
                  slot="icon"
                  :name="0"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
              <van-cell
                :title="it.name"
                clickable
                @click="show_event(it.id)"
                v-for="(it,j) in event"
                :key="j"
              >
                <van-radio
                  slot="icon"
                  :name="j+1"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
        <van-popup
          v-model="technology"
          :safe-area-inset-bottom="true"
          :style="{width:'54%',fontSize:'14px',borderRadius:'10px'}"
          :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
        >
          <van-radio-group v-model="radio">
            <van-cell-group :style="{textAlign:'left'}">
              <van-cell
                :title="it.name"
                clickable
                @click="show_dept(it.dingding_id)"
                v-for="(it,i) in list"
                :key="i"
              >
                <van-radio
                  slot="icon"
                  :name="i"
                  :style="{marginRight:'4vw'}"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </van-row>
    </div>
    <div
      id="myChart"
      :style="{width: '100%', height: '300px',marginTop:'30px'}"
    ></div>
    <van-overlay
      :show="isShowloading"
      @click="isShowloading = false"
    >
      <div
        class="wrapper"
        @click.stop
      >
        <van-loading
          vertical
          type="spinner"
          size="50"
        >数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script type="text/javascript">
import {
  Icon,
  Popup,
  Row,
  Col,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  DatetimePicker,
  Overlay,
  Loading
} from "vant";
export default {
  data() {
    return {
      radio: 0,
      isShowloading: false,
      show: false,
      time: false,
      technology: false,
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      dept: "",
      list: [],
      arr: [],
      event: [],
      dept_id: "",
      event_id: ""
    };
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Loading.name]: Loading,
    [Overlay.name]: Overlay
  },
  created() {
    dd.biz.navigation.setTitle({
      title: "排名变化" //控制标题文本，空字符串表示显示默认文本
    });
  },
  mounted() {
    this.getEvent();
    this.dataTime();
  },
  methods: {
    // 事件筛选
    show_event(id) {
      this.event_id = id;
      this.getRankingChange(this.data_time, this.dept_id, id);
      this.show = false;
    },
    // 事件数据
    async getEvent() {
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/Event?corpId=${corpId}&type=0`
      );
      this.event = res.data.data;
    },
    // 部门筛选
    show_dept(id) {
      this.dept_id = id;
      this.technology = false;
      this.getRankingChange(this.data_time, id, this.event_id);
    },
    // 当前时间
    dataTime() {
      let yy = new Date().getFullYear();
      this.data_time = yy;
      this.currentDate = yy;
      this.getRankingChange(yy);
    },
    // 选择时间
    getTime_month(time) {
      // console.log(time)
      const d = new Date(time);
      let yy = d.getFullYear();
      this.data_time = yy;
      this.time = false;
      this.getRankingChange(yy, this.dept_id, this.event_id);
    },
    async getRankingChange(time, id, event) {
      this.isShowloading=true;
      if (id == undefined) {
        id = "";
      }
      if (event == undefined || event == 0) {
        event = "";
      }
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http
        .get(
          `yuepoints/getRankingChange?corpId=${corpId}&ddId=${userId}&year=${time}&depId=${id}&event=${event}`
        )
        .then(res => {
          const {
            data: { list, dept },
            errcode,
            errmsg
          } = res.data;
          if (errcode == "0000") {
            this.isShowloading=false;
            this.arr = list.rankList;
            this.dept = dept.office_id.key;
            this.list = dept.office_list;
            this.drawLine();
          } else if (errcode == "1005") {
            this.isShowloading=false;
            this.$toast(errmsg);
          }
        });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let list_arr = [];
      list_arr = this.arr;
      let item = [];
      for (let i = 0; i < list_arr.length; i++) {
        item.push(list_arr[i].rank);
      }
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          name: "(月)",
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          nameTextStyle: {
            color: "rgba(0, 114, 255, 0.88)"
          },
          axisLine: {
            lineStyle: {
              color: "rgba(136, 132, 132, 0.87)" // 颜色
              //   width: 3 // 粗细
            }
          }
        },
        yAxis: {
          name: "(名次)",
          splitLine: { show: false },
          type: "value",
          nameTextStyle: {
            color: "rgba(0, 114, 255, 0.88)",
            borderColor: "silver"
          },
          axisLine: {
            lineStyle: {
              color: "rgba(136, 132, 132, 0.87)" // 颜色
              //   width: 3 // 粗细
            }
          }
        },
        series: [
          {
            type: "line",
            color: "rgba(0, 114, 255, 0.88)",
            data: item,
            // areaStyle: {},
            // data: [0, 2, 4, 6, 8],
            width: "100%",
            areaStyle: {
              //区域填充样式
              color: {
                // type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#b1e3fe" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  /deep/ .van-overlay{
    z-index:2
  }
  .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
  .rankingChange_top {
    height: 45px;
    line-height: 45px;
    background: #fff;
    // text-align: left;
    color: #0072ffe0;
    // span {
    //   display: inline-block;
    //   width: 28%;
    // }
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
